
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css" />
    <script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	  <script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>


<%--	  <script src="lib/html5.js"></script>--%>

	  </script>

  </head>
<body>

<c:import url="top.jsp"></c:import>
<c:import url="left.jsp"></c:import>


    <div id="man">
    <div class="content">
		<div class="header">
			<h1 class="page-title">促销管理</h1>
		</div>
		
		<ul class="breadcrumb">
			<li><a href="adimg.jsp">促销管理</a> <span class="divider">/</span></li>
			<li class="active">首页轮播</li>
		</ul>
		
		<div class="container-fluid">
		
			<div class="row-fluid">

				<div class="block">
					<a href="#page-filter" class="block-heading" data-toggle="collapse">添加轮播图</a>
					<div id="page-filter" class="block-body collapse in">
						<div class="search-well">
							<form  class="form-inline" role="search"
								action="#" method="post" id="uploadForm">
								<input type="text" class="form-control" placeholder="请输入图书ID"
										name="book_id" v-model="addshufflingArray.book_id" />
								<input type="file" class="form-control" id="pic" name="ad_img" placeholder="请上传轮播图片" />
								
								<button class="btn btn-primary" type="button"  @click="saveShuffling">
									<i class="icon-save"></i> 保存
								</button>

							</form>
						</div>
					</div>
				</div>
			</div>
		
			<div class="row-fluid">

				<div class="block">
			        <p class="block-heading">轮播列表</p>
			        <div class="block-body gallery">

			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=40" title="查看" target="_blank" v-for="(shuffling,i) in shufflingArray" :key="i">
			        				<img :src="'${pageContext.request.contextPath}/upload/' + shuffling.ad_img"  :value="shuffling.book_id" width="450px" class="img-polaroid">
			        			</a>
<%--			        			<a href="javascript:deleteClick(11)"><img src="static/images/no.gif" /></a>--%>
<%--			        		--%>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=22" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad02.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(12)"><img src="static/images/no.gif" /></a>--%>
<%--			        		--%>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=1" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad03.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(14)"><img src="static/images/no.gif" /></a>--%>
<%--			        		--%>
<%--			        			<a href="http://114.116.212.81:80/EShop/info.jsp?bookId=2" title="查看" target="_blank">--%>
<%--			        				<img src="upload/left_ad04.png" width="450px" class="img-polaroid">--%>
<%--			        			</a>--%>
<%--			        			<a href="javascript:deleteClick(15)"><img src="static/images/no.gif" /></a>--%>

			        </div>
			    </div>

			</div>
			
			
<c:import url="footer.jsp"></c:import>
		</div>
	
		
	</div>

	</div>



<script>

	var boy = new Vue({
		el:"#man",
		data:{
			shufflingArray:[],
			addshufflingArray:[]
		},
		methods:{
			//查询轮播页面数据，映射上
			selectshuffling(){
				$.post("${pageContext.request.contextPath }/shuffling/selectpic.do",function(man){
					if (man.code==200){
						boy.shufflingArray=man.data
						//console.log(man.data)
					}
				})
			},
			//上传图片
			uploadpic(){
				var  shuffling_pic = $("#pic")[0].files[0];

				console.log(shuffling_pic)

				var formData = new FormData();
				formData.append("shuffling_pic",shuffling_pic);
				console.log(formData)
				alert("aaa")



				$.ajax({
					url: '${pageContext.request.contextPath }/upload/shufflingupload.do',
					type: 'POST',
					cache: false,
					data: formData,
					processData: false,
					contentType: false
				}).done(function(res) {
					console.log("======done=======")
					//上传成功后把照片存在addshufflingArray数组里面
					boy.shufflingArray.shuffling_pic=res.shuffling_pic
					//调用添加图书轮播图的方法
					boy.addshuffling();
					//console.log(res)

				}).fail(function(res) {
					console.log("======fail=======")
					console.log(res)
				});

			},
			//点击保存按钮时
			saveShuffling(){
				this.uploadpic()
				// alert("点了")
			},
			//添加轮播图的图片
			addshuffling(){
					var data={
						book_id:boy.addshufflingArray.book_id,
						ad_img:boy.shufflingArray.shuffling_pic
					}
				console.log(data)

				$.post("${pageContext.request.contextPath }/shuffling/addshuffling.do",data,function(man){


				})


			}

		},
		created(){
			this.selectshuffling()

		}
	})


</script>

    
    <script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/tooltips.js"></script>

<%--	<script type="text/javascript">--%>
<%--		$("[rel=tooltip]").tooltip();--%>
<%--		$(function() {--%>
<%--			$('.demo-cancel-click').click(function() {--%>
<%--				return false;--%>
<%--			});--%>
<%--			--%>
<%--			$("#btnSave").click(function(){--%>
<%--				var book_id=$("input[name='book_id']").val();--%>
<%--				var ad_img=$("input[name='ad_img']").val();--%>
<%--				if (book_id=='') {--%>
<%--					show_err_msg("请输入书籍ID");--%>
<%--				}else if (ad_img=='') {--%>
<%--					show_err_msg("请上传轮播图片");--%>
<%--				}else{--%>
<%--					--%>
<%--					show_loading();--%>
<%--					uploadImg(book_id, ad_img);--%>
<%--					--%>
<%--				}--%>
<%--				--%>
<%--				return false;--%>
<%--			});--%>
<%--			--%>
<%--		});--%>
<%--		--%>
<%--		function deleteClick(ad_id) {--%>
<%--			if (confirm("你确定删除吗？")) {--%>
<%--				show_loading();--%>
<%--				var url="promotion/adimg/delete.action";--%>
<%--				var data={--%>
<%--						ad_id:ad_id--%>
<%--				};--%>
<%--				--%>
<%--				$.post(url,data,function(response){--%>
<%--					var jsonData=$.parseJSON(response);--%>
<%--					var result=jsonData.status;--%>
<%--					--%>
<%--					var responseUrl="promotion/adimg.action";--%>
<%--					if(result=="200"){--%>
<%--						show_msg('操作成功',responseUrl);--%>
<%--					}else{--%>
<%--						show_err_msg('操作失败');--%>
<%--					}--%>

<%--				});--%>
<%--			}--%>
<%--			--%>
<%--		}--%>
<%--		--%>
<%--		function uploadImg(book_id,fileName){--%>
<%--			var headFile = fileName.substr(fileName.indexOf("."));--%>
<%--		    if(headFile=='.jpg' || headFile=='.jpeg' || headFile=='.png'){--%>
<%--		    	//开始上传图片--%>
<%--		    	show_loading();--%>
<%--		    	var formData=new FormData();--%>
<%--		    	formData.append("fileImg", $("input[name='ad_img']")[0].files[0]);--%>
<%--		    	--%>
<%--		    	$.ajax({--%>
<%--		    	    url: 'upload.action',--%>
<%--		    	    type: 'POST',--%>
<%--		    	    cache: false,--%>
<%--		    	    data: formData,--%>
<%--		    	    processData: false,--%>
<%--		    	    contentType: false--%>
<%--		    	}).done(function(res) {--%>
<%--		    		var jsonData=$.parseJSON(res);--%>
<%--					if (jsonData.status==200) {--%>
<%--						requestAddImg(book_id,jsonData.fileArray[0]);--%>
<%--					}else{--%>
<%--						show_err_msg('上传图片失败');--%>
<%--					}--%>
<%--		    	}).fail(function(res) {--%>
<%--		    		show_err_msg('上传图片失败');--%>
<%--		    	});--%>
<%--		    	--%>
<%--		    }else{--%>
<%--		    	show_err_msg('不支持该图片类型，请上传jpg、jpeg、png格式的图片');--%>
<%--		    }--%>
<%--			--%>
<%--		}--%>
<%--		--%>
<%--		function requestAddImg(book_id,ad_img){--%>
<%--			//ajax请求servlet--%>
<%--		    var url="promotion/adimg/add.action";--%>
<%--			var data={--%>
<%--					book_id:book_id,--%>
<%--					ad_img:ad_img--%>
<%--			};--%>
<%--			--%>
<%--			$.post(url,data,function(response){--%>
<%--				var jsonData=$.parseJSON(response);--%>
<%--				var result=jsonData.status;--%>
<%--				--%>
<%--				var responseUrl="promotion/adimg.action";--%>
<%--				if(result=="200"){--%>
<%--					show_msg('操作成功',responseUrl);--%>
<%--				}else{--%>
<%--					show_err_msg('操作失败');--%>
<%--				}--%>

<%--			});--%>
<%--		}--%>
<%--		--%>
<%--	</script>--%>

</body>
</html>